<template>
  <el-form inline class="mt-30">
    <el-form-item label="选择玩家">
      <el-select filterable default-first-option style="width: 200px" value-key="玩家" v-model="selectedPlayer" @change="handleSelected">
        <el-option v-for="item in playerList" :key="item['玩家']" :value="item" :label="item['玩家']">
          <div class="option">
            <span>{{ item["玩家"] }}</span>
            <el-tag :style="{ background: `var(--${item['职业']})`, borderColor: `var(--${item['职业']})` }">{{ item["职业"] }}</el-tag>
          </div>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <div class="option">
        <el-tag :style="{ background: `var(--${selectedPlayer['职业']})`, borderColor: `var(--${selectedPlayer['职业']})` }" size="large">
          {{ selectedPlayer["职业"] }}
        </el-tag>
      </div>
    </el-form-item>
  </el-form>

  <el-row class="mt-30">
    <el-col class="pr-10" :span="8">
      <el-card class="card">
        <div class="float-right">
          <el-radio-group v-model="groupRadarData.type" @change="groupRadar">
            <el-radio-button label="全部" :value="0" />
            <el-radio-button label="职业" :value="1" />
          </el-radio-group>
        </div>
        <echarts class="echarts" ref="groupRadarRef" title="团内表现" :indicator="groupRadarData.indicator" :data="groupRadarData.data"></echarts>
      </el-card>
    </el-col>

    <el-col class="plr-10" :span="8">
      <el-card class="card">
        <echarts
          class="echarts"
          ref="groupRoleRadarRef"
          title="团内作用表现"
          :indicator="groupRoleRadarData.indicator"
          :data="groupRoleRadarData.data"
        ></echarts>
      </el-card>
    </el-col>

    <!-- <el-col class="pl-10" :span="8">
      <el-card>
        <echarts
          class="echarts"
          ref="occupationRadarRef"
          title="职业表现"
          :indicator="occupationRadarData.indicator"
          :data="occupationRadarData.data"
        ></echarts>
      </el-card>
    </el-col> -->

    <el-col class="pl-10" :span="8">
      <el-card class="card">
        <div class="float-right">
          <el-radio-group v-model="gameRadarData.type" @change="gameRadar">
            <el-radio-button label="全部" :value="0" />
            <el-radio-button label="职业" :value="1" />
          </el-radio-group>
        </div>
        <echarts class="echarts" ref="gameRadarRef" title="场内表现" :indicator="gameRadarData.indicator" :data="gameRadarData.data"></echarts>
      </el-card>
    </el-col>
  </el-row>

  <div class="kv-image" :class="selectedPlayer['职业']"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive, nextTick } from "vue";
import echarts from "@/components/echarts/echarts.vue";
import { useStore } from "vuex";

const store = useStore();
const playerList = ref(store.getters.getBaseData);
const selectedPlayer = ref({} as any);
// 团内表现
const groupRadarData = reactive({
  type: 0,
  indicator: [],
  data: [],
});
// 团内作用表现
const groupRoleRadarData = reactive({
  indicator: [],
  data: [],
});
// 职业表现
// const occupationRadarData = reactive({
//   indicator: [],
//   data: [],
// });
// 场内表现
const gameRadarData = reactive({
  type: 0,
  indicator: [],
  data: [],
});

const handleSelected = () => {
  groupRadar();
  groupRoleRadar();
  // occupationRadar();
  gameRadar();
};
/** 团内雷达图数据构造 */
const groupRadarRef: any = ref();
const groupRadar = () => {
  let { 团长, 职业 } = selectedPlayer.value;
  let filterList = playerList.value.filter((item) => item["团长"] === 团长);
  if (groupRadarData.type === 1) {
    filterList = filterList.filter((item) => item["职业"] === 职业);
  }
  const { indicator, data } = computedMaxValue(filterList);
  groupRadarData.indicator = indicator;
  groupRadarData.data = data;

  nextTick(() => {
    groupRadarRef.value.init();
  });
};
/** 团内作用雷达数据构造 */
const groupRoleRadarRef: any = ref();
const groupRoleRadar = () => {
  let { 团长, 职业 } = selectedPlayer.value;
  let filterList = playerList.value.filter((item) => item["团长"] === 团长);
  if (["素问", "铁衣"].indexOf(职业) > -1) {
    filterList = filterList.filter((item) => item["职业"] === 职业);
  } else {
    filterList = filterList.filter((item) => ["素问", "铁衣"].indexOf(item["职业"]) == -1);
  }
  const { indicator, data } = computedMaxValue(filterList);
  groupRoleRadarData.indicator = indicator;
  groupRoleRadarData.data = data;

  nextTick(() => {
    groupRoleRadarRef.value.init();
  });
};
//#region 职业雷达图数据构造(弃用)
/** 职业雷达图数据构造 */
// const occupationRadarRef: any = ref();
// const occupationRadar = () => {
//   let { 职业 } = selectedPlayer.value;
//   const groups = playerList.value.filter((item) => item["职业"] === 职业);
//   const { indicator, data } = computedMaxValue(groups);
//   occupationRadarData.indicator = indicator;
//   occupationRadarData.data = data;

//   nextTick(() => {
//     occupationRadarRef.value.init();
//   });
// };
//#endregion
/** 场内雷达图数据构造 */
const gameRadarRef: any = ref();
const gameRadar = () => {
  let { 职业 } = selectedPlayer.value;
  let filterList = playerList.value;
  if (gameRadarData.type === 1) {
    filterList = filterList.filter((item) => item["职业"] === 职业);
  }
  const { indicator, data } = computedMaxValue(filterList);
  gameRadarData.indicator = indicator;
  gameRadarData.data = data;

  nextTick(() => {
    gameRadarRef.value.init();
  });
};
/** 计算各项值的吕布 */
const computedMaxValue = (groups) => {
  let { 团长, 帮会名, 玩家, 职业, 等级, 治疗值, 战复, 青灯焚骨, ...otherData } = selectedPlayer.value;
  // 计算平均
  let argValue = groups.reduce((res, obj) => {
    Object.keys(obj).map((key) => {
      res[key] = (res[key] || 0) + Number(obj[key]);
    });

    return res;
  }, {});
  Object.keys(argValue).map((key) => {
    argValue[key] = parseFloat((Number(argValue[key]) / groups.length).toFixed(2));
  });
  // 计算吕布
  let maxValues = groups.reduce((acc, obj) => {
    Object.keys(obj).forEach((key) => {
      acc[key] = Math.max(acc[key] || 0, obj[key]);
    });
    return acc;
  }, {});
  let needData: any = {};
  if (selectedPlayer.value["职业"] == "素问") {
    const { 人伤, 塔伤, 总伤, 击败, 控制, 伤害效率, ...data } = otherData;
    needData = { ...data, 治疗值, 战复 };
  } else if (selectedPlayer.value["职业"] == "九灵") {
    needData = { ...otherData, 青灯焚骨 };
  } else if (selectedPlayer.value["职业"] == "龙吟") {
    needData = { ...otherData, 治疗值 };
  } else if (selectedPlayer.value["职业"] == "鸿音") {
    needData = { ...otherData, 战复 };
  } else {
    needData = otherData;
  }
  const data = [[], []];
  const indicator = Object.keys(needData).map((key) => {
    data[0].push(selectedPlayer.value[key]);
    data[1].push(argValue[key]);
    return {
      name: key,
      max: maxValues[key],
    };
  });
  return { data, indicator };
};

watch(
  () => store.state.objectType,
  () => {
    playerList.value = store.getters.getBaseData;
    selectedPlayer.value = playerList.value[0] || {};
    handleSelected();
  }
);

onMounted(() => {
  selectedPlayer.value = playerList.value[0] || {};
  handleSelected();
});
</script>

<style scoped lang="scss">
.echarts {
  height: 400px;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::v-deep .el-tag {
    color: #333;
  }
}

.dark {
  .option::v-deep .el-tag {
    color: #fff;
  }

  .card {
    --el-card-bg-color: rgba(0, 0, 0, 0.7);
  }
}

.card {
  --el-card-bg-color: rgba(255, 255, 255, 0.8);
  position: relative;

  .float-right {
    position: absolute;
    right: 20px;
    z-index: 1;
  }
}

.mt-30 {
  margin-top: 30px;
}
</style>
